<template>
	<view>
		<!-- 消息列表 -->
		<template v-if="list.length>0">
			<block v-for="(item,index) in list" :key="index">
				<msg-list :item="item" :index="index"></msg-list>
			</block>
		</template>
		<template v-else>
			<nothing></nothing>
		</template>
		<!-- 弹出层 -->
		<!-- <uni-popup ref="popup" type="top" mask-background-color="rgba(0, 0, 0, 0.4)">123</uni-popup>-->
		<uni-popup ref="popup" type="top" background-color="#FFF">
			<view class="flex align-center justify-center font-md border-bottom py-2" hover-class="bg-light" @click="popupEvent('friend')">
				<text class="iconfont icon-sousuo mr-2"></text>添加好友
			</view>
			<view class="flex align-center justify-center font-md py-2"hover-class="bg-light" @click="popupEvent('clear')">
				<text class="iconfont icon-shanchu mr-2"></text>清除缓存
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from "@/components/uni-ui/uni-popup/uni-popup.vue"
	//模拟数据
	const demo = [{
			avatar: "/static/tabbar/微信图片_20240418093242.jpg",
			username: "鞠了个攻",
			create_time: 1718591077566,
			data: "欢迎观看《千香引》",
			notread: 6
		},
		{
			avatar: "/static/jjy9.jpg",
			username: "鞠婧祎应援会官微",
			create_time: 1718591077566,
			data: "欢迎关注鞠婧祎官方应援会。恭喜你发现唱跳演俱佳的宝藏全能型艺人鞠婧祎！跟随会会的脚步一起快乐追祎吧！点击聊天框下方菜单栏可快捷了解更多信息喔！吃我一记安利大礼包http:t.cn/A6fWPPBJ鞠家官方平台及粉丝群http:t.cn/A65LQXvu",
			notread: 5
		},
		{
			avatar: "/static/tabbar/jjy3.jpg",
			username: "TNB_k.鞠婧祎",
			create_time: 1718591077566,
			data: "《花间令》开播啦",
			notread: 7
		}
	]
	import msgList from '@/components/msg/msg-list.vue';
	export default {
		components: {
			msgList,
			uniPopup
		},
		// 监听原生导航栏点击按钮事件
		onNavigationBarButtonTap(e) {
			// console.log(e);
			switch (e.index) {
				case 0: // 右边
					this.$refs.popup.open()
					//避免下拉加载图标和遮罩层同时存在
					uni.stopPullDownRefresh()
					break;
				case 1: //左边
					// console.log('点击了右边')
					//关闭遮罩层
				uni.navigateTo({
					url:'/pages/user-list/user-list'
				})
				this.$refs.popup.close()
				break;
			}
		},
		//页面加载时
		onLoad() {
			// this.list=demo
		},
		//监听用户下拉刷新动作
		onPullDownRefresh() {
			this.refresh()
		},
		data() {
			return {
				list: []
			};
		},
		methods: {
			// 下拉加载刷新 手动
			refresh() {
				//定时器 模拟两秒钟后 加载数据
				setTimeout(() => {
					this.list = demo
					//同时取消加载动画
					uni.stopPullDownRefresh()
				}, 1000)
			},
			//监听弹出层的选项点击事件
			popupEvent(e){
				switch (e){
					case 'friend':
					console.log('跳转到添加好友')
						break;
					case 'clear':
						console.log('清除缓存功能')
							break;
				}
			}
		}
	}
</script>

<style lang="scss">

</style>